<template>
    <div>
        <el-form :inline="true" :model="searchForm" class="forTbFilter">
            <el-form-item label="所属客户：">
                <el-select v-model="searchForm.agentId" filterable placeholder="请选择或输入关键字" clearable>
                    <el-option v-for="item in agentsOption" :value="item.id" :key="item.id" :label="item.name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="链接名称：">
                <el-input v-model.trim="searchForm.name" clearable></el-input>
            </el-form-item>
            <el-form-item class="btnArea">
                <el-button type="primary" @click="getFluxPoolMgtListHandler">搜索查询</el-button>
                <el-button type="primary" @click="showAddFluxPool">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tbpg.tableData" border>
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="agentName" label="所属客户"></el-table-column>
            <el-table-column prop="name" label="链接名称"></el-table-column>
            <el-table-column prop="urlTypeName" label="链接类型"></el-table-column>
            <el-table-column prop="urlNote" label="链接标识"></el-table-column>
            <el-table-column prop="totalSize" label="点击数量" width="80"></el-table-column>
            <el-table-column prop="yesterdayCount" label="昨日点击" width="80"></el-table-column>
            <el-table-column label="推广链接" width="500">
                <template v-slot="scope">
                    <el-tooltip :content="scope.row.urlInfo">
                        <p style="color:crimson"> {{ scope.row.urlInfo }}</p>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column prop="updateTime" label="最近一次点击时间"></el-table-column>
            <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <el-button type="text" @click="showEditFluxPool(scope.row)">编 辑</el-button>
                    <el-button type="text" @click="copyUrl" class="tag-read"
                        :data-clipboard-text="scope.row.urlInfo">复制推广链接</el-button>
                    <el-button type="text" @click="deleteUrl(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="tbpg.currentPage" :page-sizes="[15, 50, 100, 500]" :page-size="tbpg.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="tbpg.total">
        </el-pagination>
        <el-dialog :title="title" :visible.sync="poolVisibale" width="600px" @close="cancel" :close-on-click-modal="false">

            <el-form ref="poolForm" :model="poolForm" :rules="poolRules" label-width="120px">
                <el-form-item label="所属客户：" prop="agentId" v-if="title == '新增链接'">
                    <el-select v-model="poolForm.agentId" @change="changeAgent" clearable>
                        <el-option v-for="item in agentsOption" :value="item.id" :key="item.id"
                            :label="item.name"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="链接名称：" prop="name">
                    <el-input v-model="poolForm.name" placeholder="方便自己识别记忆"></el-input>
                </el-form-item>
                <el-form-item label="链接点击数：" prop="totalSize" v-if="title != '新增链接'">
                    <el-input v-model="poolForm.totalSize" placeholder="点击数"></el-input>
                </el-form-item>
                <el-form-item label="链接源：" prop="urlSource">
                    <el-radio-group v-model="poolForm.urlSource" @input="handleBaseUrl">
                        <el-radio :label="1">抖音</el-radio>
                        <el-radio :label="3">腾讯</el-radio>
                        <el-radio :label="5">百度</el-radio>
                        <el-radio :label="7">快手</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="基础链接：" prop="urlInfo">
                    <el-input v-model="poolForm.urlInfo" placeholder="请联系技术获取"></el-input>
                </el-form-item>
                <el-form-item label="链接标识：" prop="urlNote">
                    <el-input v-model="poolForm.urlNote" placeholder="英文字母或数字组成，请确定标识唯一"></el-input>
                </el-form-item>

                <el-form-item label="链接类型：" prop="urlType">
                    <el-radio-group v-model="poolForm.urlType">
                        <el-radio :label="0">允许重复点击数据</el-radio>
                        <el-radio :label="1">不允许重复点击数据</el-radio>
                    </el-radio-group>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="sureAddOrEditFluxPool">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 删除链接提示 -->
        <el-dialog :title="title" :visible.sync="deleteUrlVisibale" width="600px" @close="cancelDelUrl"
            :close-on-click-modal="false">
            <el-form ref="deleteForm" :model="deleteForm" :rules="poolRules" label-width="120px">
                <el-form-item label="所属客户：" prop="agentName" v-if="title == '删除链接'">
                    <!-- <el-select v-model="poolForm.agentId"  @change="changeAgent" clearable>
                        <el-option v-for="item in agentsOption" :value="item.id" :key="item.id" :label="item.name"></el-option>
                    </el-select> -->
                    <el-input :disabled="true" v-model="deleteForm.agentName"></el-input>
                </el-form-item>

                <el-form-item label="链接名称：" prop="name">
                    <el-input v-model="deleteForm.name" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="链接点击数：" prop="totalSize" v-if="title != '新增链接'">
                    <el-input v-model="deleteForm.totalSize" placeholder="点击数" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="链接源：" prop="urlSource">
                    <el-radio-group v-model="deleteForm.urlSource" @input="handleBaseUrl" :disabled="true">
                        <el-radio :label="1">抖音</el-radio>
                        <el-radio :label="3">腾讯</el-radio>
                        <el-radio :label="5">百度</el-radio>
                        <el-radio :label="7">快手</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="基础链接：" prop="urlInfo">
                    <el-input v-model="deleteForm.urlInfo" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="链接标识：" prop="urlNote">
                    <el-input v-model="deleteForm.urlNote" :disabled="true"></el-input>
                </el-form-item>

                <el-form-item label="链接类型：" prop="urlType">
                    <el-radio-group v-model="deleteForm.urlType" :disabled="true">
                        <el-radio :label="0">允许重复点击数据</el-radio>
                        <el-radio :label="1">不允许重复点击数据</el-radio>
                    </el-radio-group>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="sureDeleteUrl">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import { getFluxPoolMgtList, addFluxPool, editFluxPool, deleteUrl } from '@/api/fluxPools.js'
import common from '@/utils/common.js'
import Clipboard from 'clipboard'
export default {
    data() {
        return {
            searchForm: {
                agentId: '',
                name: ''
            },
            tbpg: {
                tableData: [],
                currentPage: 1,
                pageSize: 15,
                total: 0
            },
            poolVisibale: false,
            deleteUrlVisibale: false,
            title: '新增链接',
            optFlag: '',
            poolForm: {
                id: '',
                name: '',
                agentId: '',
                totalSize: '',
                remark: '',
                urlNote: '',
                urlInfo: '',
                totalSize: '',
                urlType: '',
                urlSource: ''
            },
            deleteForm: {
                agentId: '',
                agentName: '',
                urlId: '',
                name: '',
                totalSize: '',
                urlInfo: '',
                urlNote: '',
                urlSource: ''
            },
            typesOption: [

                {
                    id: '0',
                    name: '运营商流量池'
                },
                {
                    id: '1',
                    name: '自运营流量池'
                }
            ],
            supplierOption: [],
            agentsOption: [],
            poolRules: {

            },
            urlList: [
                "https://crm.xinzengzhang.com.cn/web/api/v1/xxtx/tiktok/get/dianji/zj?myName=&aid_name=__AID_NAME__&campaign_name=__CAMPAIGN_NAME__&imei=__IMEI__&idfa=__IDFA__&oaid=__OAID__&oaid_md5=__OAID_MD5__&aid=__AID__&advertiser_id=__ADVERTISER_ID__&cid=__CID__&cid_name=__CID_NAME__&campaign_id=__CAMPAIGN_ID__&ctype=__CTYPE__&csite=__CSITE__&convert_id=__CONVERT_ID__&request_id=__REQUEST_ID__&sl=__SL__&androidid=__ANDROIDID__&os=__OS__&mac=__MAC__&mac1=__MAC1__&ip=__IP__&ua=__UA__&geo=__GEO__&ts=__TS__&callback_param=__CALLBACK_PARAM__&callback_url=__CALLBACK_URL__&model=__MODEL__&union_site=__UNION_SITE__",
                "https://crm.xinzengzhang.com.cn/web/api/v1/xxtx/tencent/get/dianji/zj?myName=",
                "https://crm.xinzengzhang.com.cn/web/api/v1/xxtx/baidu/get/dianji/zj?myName=&aid=__IDEA_ID__&pid=__PLAN_ID__&uid=__UNIT_ID__&userid=__USER_ID__&click_id=__CLICK_ID__&idfa=__IDFA__&imei_md5=__IMEI__&androidid=__ANDROIDID1__&androidid_md5=__ANDROIDID__&ip=__IP__&ua=__UA__&os=__OS__&ts=__TS__&ext_info=__EXT_INFO__&mac_md5=__MAC1__&mac=__MAC__&oaid=__OAID__&oaid_md5=__OAID_MD5__&comb_id=__COMBID__&size=__SIZE__&deeplink_url=__DEEPLINK_URL__&bd_vid=__BD_VID__",
                "https://crm.xinzengzhang.com.cn/web/api/v1/xxtx/kuaishou/get/dianji/zj?&idfaMD5=__IDFA2__&imeiMD5=__IMEI2__&callback=__CALLBACK__",
            ]
        }
    },
    methods: {
        copyUrl() {
            var clipboard = new Clipboard('.tag-read')
            clipboard.on('success', e => {
                this.$message.success('复制成功')
                clipboard.destroy()// 释放内存
            })
            clipboard.on('error', e => {
                this.$message.error('复制失败')
                clipboard.destroy()// 释放内存
            })
        },
        cancel() {
            this.poolVisibale = false;
            this.$refs.poolForm.resetFields();
        },
        getFluxPoolMgtListHandler($event) {
            common.resetCurrentPage(this, $event, 'tbpg');
            var data = common.getRequestParams(this, 'tbpg', this.searchForm);
            getFluxPoolMgtList(data).then(res => {
                common.listCallback(this, res, 'tbpg');
            })
        },
        showAddFluxPool() {
            this.poolVisibale = true;
            this.title = '新增链接';
            this.optFlag = 'add';
            for (var key in this.poolForm) {
                this.poolForm[key] = '';
            }
            // this.poolForm["urlInfo"] = "https://wz.519liuliang.com/web/api/v1/xxtx/tiktok/get/dianji/zj?aid_name=__AID_NAME__&campaign_name=__CAMPAIGN_NAME__&imei=__IMEI__&idfa=__IDFA__&oaid=__OAID__&oaid_md5=__OAID_MD5__&myName="
            this.poolForm["urlInfo"] = "";

            common.getNextAgentOptsCom(this, 'agentsOption');
        },
        handleBaseUrl(value) {
            // 改变baseurl
            if (value == 1) {
                // 抖音数据
                this.poolForm["urlInfo"] = "https://crm.xinzengzhang.com.cn/web/api/v1/xxtx/tiktok/get/dianji/zj?myName=&aid_name=__AID_NAME__&campaign_name=__CAMPAIGN_NAME__&imei=__IMEI__&idfa=__IDFA__&oaid=__OAID__&oaid_md5=__OAID_MD5__&aid=__AID__&advertiser_id=__ADVERTISER_ID__&cid=__CID__&cid_name=__CID_NAME__&campaign_id=__CAMPAIGN_ID__&ctype=__CTYPE__&csite=__CSITE__&convert_id=__CONVERT_ID__&request_id=__REQUEST_ID__&sl=__SL__&androidid=__ANDROIDID__&os=__OS__&mac=__MAC__&mac1=__MAC1__&ip=__IP__&ua=__UA__&geo=__GEO__&ts=__TS__&callback_param=__CALLBACK_PARAM__&callback_url=__CALLBACK_URL__&model=__MODEL__&union_site=__UNION_SITE__";
            }
            if (value == 3) {
                // 腾讯数据
                this.poolForm["urlInfo"] = "https://crm.xinzengzhang.com.cn/web/api/v1/xxtx/tencent/get/dianji/zj?myName=";
            }
            if (value == 5) {
                // 百度数据
                this.poolForm["urlInfo"] = "https://crm.xinzengzhang.com.cn/web/api/v1/xxtx/baidu/get/dianji/zj?myName=&aid=__IDEA_ID__&pid=__PLAN_ID__&uid=__UNIT_ID__&userid=__USER_ID__&click_id=__CLICK_ID__&idfa=__IDFA__&imei_md5=__IMEI__&androidid=__ANDROIDID1__&androidid_md5=__ANDROIDID__&ip=__IP__&ua=__UA__&os=__OS__&ts=__TS__&ext_info=__EXT_INFO__&mac_md5=__MAC1__&mac=__MAC__&oaid=__OAID__&oaid_md5=__OAID_MD5__&comb_id=__COMBID__&size=__SIZE__&deeplink_url=__DEEPLINK_URL__&bd_vid=__BD_VID__";
            }
            if (value == 7) {
                this.poolForm["urlInfo"] = "https://crm.xinzengzhang.com.cn/web/api/v1/xxtx/kuaishou/get/dianji/zj?&idfaMD5=__IDFA2__&imeiMD5=__IMEI2__&callback=__CALLBACK__";
            }
        },
        changeAgent(val) {
            let that = this;
            for (var i = 0; i < that.agentsOption.length; i++) {
                if (that.agentsOption[i]["agentPathId"] === val) {
                    that.poolForm["urlNote"] = that.agentsOption[i]["accountName"];
                    that.poolForm["name"] = that.agentsOption[i]["accountName"];
                    break;
                }
            }
        },

        showEditFluxPool(row) {
            this.poolVisibale = true;
            this.title = '编辑链接';
            this.optFlag = 'edit';
            common.getNextAgentOptsCom(this, 'agentsOption');
            //  this.poolForm = JSON.parse(JSON.stringify(row));

            for (var key in this.poolForm) {
                this.poolForm[key] = row[key]
            }
        },

        deleteUrl(row) {
            this.deleteUrlVisibale = true;
            this.title = '删除链接';
            for (var key in row) {
                if (key === "id") {
                    this.deleteForm["urlId"] = row[key];
                    continue;
                }
                if (key === "createTime" || key === "updateTime") continue;
                this.deleteForm[key] = row[key];
            }
            if (row["urlInfo"].includes("tiktok")) { this.deleteForm["urlSource"] = 1 }
            if (row["urlInfo"].includes("tencent")) { this.deleteForm["urlSource"] = 3 }
            if (row["urlInfo"].includes("baidu")) { this.deleteForm["urlSource"] = 5 }
            if (row["urlInfo"].includes("kuaishou")) { this.deleteForm["urlSource"] = 7 }

        },

        sureDeleteUrl() { 
            this.$refs.deleteForm.validate(valid => {
                if (valid) {
                    var data = this.deleteForm
                    data.createTime = '';
                    deleteUrl(data).then(res => callback(res))
                }
                console.log("aaa");
                var _this = this;
                function callback(res) {
                    if (res.data.code == 200) {
                        _this.getFluxPoolMgtListHandler();
                        _this.deleteUrlVisibale = false;

                    } else {
                        _this.$message.error(res.data.message)
                    }
                }
            })

        },


        cancelDelUrl() {
            this.deleteUrlVisibale = false
            this.$refs.deleteForm.resetFields();
        },

        sureAddOrEditFluxPool() {
            if (!this.urlList.includes(this.poolForm.urlInfo)) {
                this.$message.error("基础链接有误，请从链接源选择");
                return;
            }
            var urlSourceList = [1, 3, 5, 7];
            if (urlSourceList.includes(this.poolForm.urlNote[0])) {
                this.$message.error("链接标识要以1:抖音;3:腾讯;5:百度 开头;7.快手")
                return;
            }
            if (this.poolForm.urlSource == 1 && !this.poolForm.urlNote.startsWith("1")) {
                //抖音链接，检查url标识是否是1开头
                this.$message.error("抖音链接标识以1开头");
                return;
            }
            if (this.poolForm.urlSource == 3 && !this.poolForm.urlNote.startsWith("3")) {
                //腾讯链接，检查url标识是否是1开头
                this.$message.error("腾讯链接标识以3开头");
                return;
            }
            if (this.poolForm.urlSource == 5 && !this.poolForm.urlNote.startsWith("5")) {
                //百度链接，检查url标识是否是1开头
                this.$message.error("百度链接标识以5开头");
                return;
            }
            if (this.poolForm.urlSource == 7 && !this.poolForm.urlNote.startsWith("7")) {
                //快手链接，检查url标识是否是1开头
                this.$message.error("快手链接标识以7开头");
                return;
            }
            this.$refs.poolForm.validate(valid => {
                if (valid) {
                    var data = this.poolForm
                    data.createTime = '';
                    if (this.optFlag == 'add') {
                        addFluxPool(data).then(res => callback(res))
                    } else {
                        editFluxPool(data).then(res => callback(res))
                    }
                }
                var _this = this;
                function callback(res) {
                    if (res.data.code == 200) {
                        _this.getFluxPoolMgtListHandler();
                        _this.poolVisibale = false;

                    } else {
                        _this.$message.error(res.data.message)
                    }
                }
            })
        },
        handleSizeChange(val) {
            this.tbpg.pageSize = val;
            this.getFluxPoolMgtListHandler();
        },
        handleCurrentChange(val) {
            this.tbpg.currentPage = val;
            this.getFluxPoolMgtListHandler();
        }
    },
    created() {
        common.getNextAgentOptsCom(this, 'agentsOption');
        this.getFluxPoolMgtListHandler();
    }
}
</script>

<style lang="scss" scoped></style>

